<template>
  <div style="position:relative; ">
    <div class="table">
      <ul class="lz">
        <li v-for="(item, index) of currentPageData" :key="index" @click="more(item.id)">
          <div class="img-width lz_left">
            <img class="img-width" :src="IP + item.thumb" alt />
          </div>
          <div class="lz_right">
            <p class="title1">{{ item.title }}</p>
            <p v-if="item.description" class="place">
              {{
              item.description.length > 80
              ? item.description.substr(1, 80) + "..."
              : item.description
              }}
            </p>
            <p class="more">详细</p>
          </div>
        </li>
      </ul>
    </div>
    <div id="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :pager-count="5"
        :page-size="pageSize"
        layout="  prev, pager, next"
        :total="this.productList.length"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      i: "",

      choose: "",
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 3, // 每页显示数量
      currentPageData: [],
    };
  },
  // created() {
  //   this.setCurrentPageData(`${this.book}api/timeline?year=2020/linshizhanlan`);
  // },
  mounted() {
    this.setCurrentPageData(
      `${this.book}api/timeline?year=${this.$router.history.current.query.lookUrl}/linshizhanlan`
    );
  },
  components: {},

  methods: {
    more(id) {
      this.$router
        .push({
          path: `/linzhan/line/year1detail?id=${id}`,
          query: { orderId: "临时展览", sort: 55 },
        })
        .catch((err) => {
          err;
        });
    },
    choosetime(index) {
      this.i = index;
    },
    setCurrentPageData() {
      this.$api
        .get(
          `${this.book}api/timeline?year=${this.$router.history.current.query.lookUrl}/linshizhanlan`
        )
        .then((res) => {
          // 计算一共有几页

          this.totalPage = Math.ceil(this.productList.length / this.pageSize);

          // 计算得0时设置为1
          this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
          this.productList = res.data.info;

          let begin = (this.currentPage - 1) * this.pageSize;
          let end = this.currentPage * this.pageSize;
          //当前页的数据等于
          this.currentPageData = this.productList.slice(begin, end);
          // console.log(this.currentPageData, "time");
        });
    },
    handleCurrentChange(val) {
      if (val != this.currentPage) {
        this.currentPage = val;
        // console.log(val)
      }

      // this.page = val;
      this.setCurrentPageData(
        `${this.book}api/timeline?year=${this.$router.history.current.query.lookUrl}/linshizhanlan`
      );
    },
  },

  watch: {
    $route(to, from) {
      if (to.query.lookUrl != from.query.lookUrl) {
        (this.currentPage = 1),
          this.setCurrentPageData(
            `${this.book}api/timeline?year=${this.$router.history.current.query.lookUrl}/linshizhanlan-1-10000`
          );
      }
      let year = new Date().getFullYear();

      if (this.$router.history.current.query.lookUrl == year) {
        this.$emit("childByvalue", this.i);
        console.log(this.i);
      }
    },
  },
};
</script>
<style scoped>
ul,
p,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.img-width {
  width: 352px;
  height: 242px;
  cursor: pointer;
}
.lineTime {
  margin-top: 40px;
  margin-left: 20px;
  margin-right: 60px;
  font-size: 18px;
  position: absolute;
  top: -160px;
  left: -218px;
}
.lineTime ul {
  border-top: 3px solid #bfbfbf;
  padding-top: 28px;
  display: flex;
  width: 1215px;

  margin: auto;
}
.lineTime li {
  margin-bottom: 70px;
  position: relative;
  margin-right: 100px;
}
.border {
  border: 2px solid #4e69a1;
  background: white;
}
.gray {
  background: #bfbfbf;
}
.lineTime i {
  width: 18px;
  height: 18px;
  display: inline-block;

  border-radius: 50%;
  position: absolute;
  left: 15px;
  top: -40px;
}

.lz li {
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  justify-content: space-between;
  margin-bottom: 45px;
  background: #f5f5f5;
}

.lz_right {
  width: 600px;
  box-sizing: border-box;

  padding: 30px 35px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.title1 {
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  margin-bottom: 25px;
  cursor: pointer;
}
.place {
  font-size: 14px;
  color: #666666;
  line-height: 30px;
  margin-bottom: 20px;
  cursor: pointer;
}

.more {
  font-size: 16px;
  margin-bottom: 10px;
  align-self: flex-end;
  cursor: pointer;
}
.content1 {
  font-size: 12px;
  line-height: 0px;
}
.table {
  margin-bottom: 100px;
  min-height: 600px;
}
/* fenye */
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
